<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="kaiji">
    <meta name="keyword" content="标签, 标签库, 博客, 信息, 列表">
    <title>标签信息列表</title>
	<#include "admin/common.ftl" />
	
	<style type="text/css">
		.form-control {color: black;}
		#delBtn {margin-left: 5px;}
	</style>
  </head>

  <body>

  <section id="container" class="">
      <!--header start-->
      <#include "admin/header.ftl" />
      <!--header end-->
      <!--sidebar start-->
      <#include "admin/sidebar.ftl" />
      <!--sidebar end-->
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
              <!-- page start-->
              <div class="row">
                  <div class="col-lg-12">
                      <section class="panel">
                          <header class="panel-heading">角色信息列表</header>
                          <!-- 自定义工具栏 -->
                          <div class="panel-body">
                              <form id="searchForm" class="form-inline" role="form">
                                  <@privUrlTag code="B00104">
	                              <button id="delBtn" type="button" class="btn btn-danger pull-right">删除</button>
	                              </@privUrlTag>
                                  <@privUrlTag code="B00102">
	                              <button id="addBtn" type="button" class="btn btn-success pull-right">添加</button>
	                              </@privUrlTag>
                              </form>
                          </div>
                          <!-- 结束自定义工具栏 -->
                       </section>
                       <section class="panel">
                          <table class="table table-striped border-top" id="dataTable">
                          <thead>
                          <tr>
                              <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#dataTable .checkboxes" /></th>
                              <th class="dt-body-center">序号</th>
                              <th class="dt-body-center">标签名称</th>
                              <th class="dt-body-center">创建人</th>
                              <th class="dt-body-center">创建时间</th>
                              <th class="dt-body-center">操作</th>
                          </tr>
                          </thead>
                          
                          </table>
                      </section>
                  </div>
              </div>
              <!-- page end-->
	      </section>
      </section>
      <!--main content end-->
  </section>

	<!-- edit modal start -->
	 <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="editModal" class="modal fade">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                     <h4 class="modal-title">标签详细信息</h4>
                 </div>
                 <div class="modal-body">

                     <form role="form" class="form-horizontal" id="editForm" action="" menthod="post">
                     	<input type="hidden" name="tagId" />
                         <div class="form-group">
                             <label for="name" class="col-sm-2 control-label">标签名</label>
                             <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" placeholder="标签名" autocomplete="off" onfocus required>
                             </div>
                         </div>
                         
                         <div class="form-group">
                         	<div class="col-lg-offset-3 col-lg-4">
                         		<button type="submit" class="btn btn-default">保存</button>
                         		<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                         	</div>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
     </div>
	<!-- end edit modal -->

   <#include "admin/common_js.ftl" />
   <script src="${ctx}/js/jquery.validate.min.js" ></script>
   <script type="text/javascript" src="${ctx}/assets/data-tables/jquery.dataTables.js"></script>
   <script type="text/javascript" src="${ctx}/assets/data-tables/DT_bootstrap.js"></script>
   <script src="${ctx}/js/dynamic-table.js"></script>
   <script src="${ctx}/js/moment.js"></script>
<script type="text/javascript">
    $(function() {
   		var $dataTable = $("#dataTable").DataTable({
	    	ajax: {   
                url: "${ctx}/admin/tag/list.html"
            },
            columns: [
                {"data": "tagId"},
                {"data": null},
                {"data": "name"},
                {"data": "authorName"},
                {
                		"data": "createDate",
                		"render": function(data, type, full, meta) {
                			 return  moment(data).format("YYYY-MM-DD HH:mm:ss");
                		}
                
                },
                {"data": null}
            ],
            "columnDefs": [
            	{
			        "targets": 0,
			        "className": 'dt-body-center',
			        "render": function (data, type, full, meta){
			            return '<input type="checkbox" name="ids" value="' + $('<div/>').text(data).html() + '">';
			        }
		        },
             	{
                 "targets": -1,
                    "defaultContent": "<@privUrlTag code="B00103"><button class='btn btn-primary btn-xs editBtn'><i class='icon-pencil'>编辑</i></button></@privUrlTag>&nbsp;&nbsp;"+
                        "<@privUrlTag code="B00105"><button class='btn btn-primary btn-xs show-article'><i class='fa icon-cogs'>相关文章</i></button></@privUrlTag>"
             	}
		    ],
            fnDrawCallback: function(){
                var api = this.api();
            　　 var startIndex= api.context[0]._iDisplayStart;
            　　 api.column(1).nodes().each(function(cell, i) {
            　　　　    cell.innerHTML = startIndex + i + 1;
            　　 });
            		$(this).find('input[type=checkbox]').removeAttr('checked');  
            }
	      	
	    });
	    
	    //查询按钮
        $("#searchBtn").on("click", function () {
            //查询后不需要保持分页状态，回首页
            $dataTable.draw();
        });

        $("#dataTable tbody").on("click", ".search-article", function () {
            var data = $dataTable.row($(this).parents("tr")).data();
            location.href="${ctx}/admin/article/tag.html?tagId="+data.tagId;
            return false;
        });

	    // 进入查询相关文章列表
	    $("#dataTable tbody").on("click", ".editBtn", function () {
			var data = $dataTable.row($(this).parents("tr")).data();
            $("#editForm").find("input[name='tagId']").val(data.tagId);
            $("#editForm").find("input[name='name']").val(data.name);
		    $("#editForm").attr("action", "${ctx}/admin/tag/update.html");
            $("#editModal").modal("show");
		});
		
		// 添加基本信息
		$("#addBtn").click(function() {
			$("#editForm").attr("action", "${ctx}/admin/tag/save.html");
			$("input").val('');
			$("#editModal").modal("show");
		});
	    
	    $("#editForm").validate({
			rules: {
				"name" : "required"
	   	 	},
		    	messages: {
			    	"name": {
			    		required: "请输入标签名称"
			    	}
			},
			submitHandler: function(form) {
				$.ajax({
					url: $(form).attr("action"),
					data: $("#editForm").serialize(),
		            type: "post",
		            dataType: "json",
		            success: function(data) {
			            	if (data.success == 0) {
								layer.alert(data.message, {icon: 5});
			            	} else {
			            		$("input").val('');
			            		$("#editModal").modal("hide");
			            		$dataTable.draw();
			            	}
		            }
				});
   			}  
		});
		
		 // 删除
        $("#delBtn").click(function () {
                var $chks = $("input[name='ids']:checked");
                var $ids = [];
                $chks.each(function(){
                    $ids.push($(this).val());
                });
                if ($ids.length <= 0) {
                    layer.alert("请至少选择一项!", {icon: 0});
                    return false;
                }

                $.ajax({
                url: "${ctx}/admin/tag/delete.html",
                data: {ids: $ids},
                type: "post",
                dataType: "json",
                success: function(data) {
                        if (data.success == 0) {
                            layer.alert(data.message, {icon: 0});
                        } else {
                            layer.msg("删除成功!");
                            $dataTable.draw();
                        }
                }
            });
        });

    });
</script>
  </body>
</html>
